import React, { Component } from 'react';
import '../style/home.css';

import News from './news';
import { getRequest } from '../tools/network'

import {
    Link,
    Route
} from 'react-router-dom'


class home extends Component {
    constructor() {
        super();

        this.state = {
            dataJsonObject: false
        };
    }

    componentDidMount() {
        var url = 'https://zhihu-daily.leanapp.cn/api/v1/last-stories';

        getRequest(url, function (json) {
            this.setState({
                dataJsonObject: json
            })
        }.bind(this));
    }

    render() {
        var dataSourceArray = [];
        if (this.state.dataJsonObject) {
            dataSourceArray = this.state.dataJsonObject.STORIES.stories;
        }

        return (
            <div>
                <ul className="list">
                    {dataSourceArray.map(function (data) {
                        return (
                            <li>
                                <Link to={{
                                    pathname: '/news/' + data.id
                                }}>

                                    <img className="li_image" src={data.images[0]} alt="" />
                                    <h3 className="title">{data.title}</h3>
                                </Link>
                            </li>
                        );
                    })}
                </ul>
            </div>
        );
    }
}

export default home;
